<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>推荐位列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <blockquote class="layui-elem-quote">
        选择代理商，配置前请询问设计有无设计此推荐位，避免无效设置！（前端使用 <span style="color: #FF5722;">location_key</span> 查询书籍，请谨慎删除！）
        同代理商和同频道下，推荐位标题需不一致
      </blockquote>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">代理商</label>
          <div class="layui-input-block">
            <select name="agent_id" id="quick_id" lay-search lay-filter="search">
              <option value="">请选择</option>
              <option value="0" {$agent_id === '0' ? 'selected' : ''}>分销平台</option>
              {foreach $agents as $v}
              <option value="{$v.id}">{$v.account}【{$v.remarks}】</option>
              {/foreach}
            </select>
          </div>
        </div>


        <div class="layui-inline">
          <label class="layui-form-label" style="white-space:nowrap!important;">推荐标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">归属频道</label>
          <div class="layui-input-block">
            <select name="freq">
              <option value="">请选择</option>
              <option value="0">无区分</option>
              <option value="1">男生</option>
              <option value="2">女生</option>
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">随机返回</label>
          <div class="layui-input-block">
            <select name="is_random">
              <option value="">请选择</option>
              <option value="1">是</option>
              <option value="0">否</option>
            </select>
          </div>
        </div>


        <div class="layui-inline">
          <label class="layui-form-label" style="">小说ID</label>
          <div class="layui-input-block">
            <input type="text" name="novel_id" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="export">导出</button>
          </button>
        </div>

      </div>
    </div>
    <div class="layui-card-body">
      <table id="LAY-recommend" lay-filter="LAY-recommend"></table>
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="del">批量删除</button>
          <button class="layui-btn layui-btn-primary layui-border-green layui-btn-sm" lay-event="plAdd">批量添加推荐位</button>
          <button class="layui-btn layui-btn-sm" lay-event="add">添加单个推荐位</button>
          <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="plAddNovel">批量设置书籍</button>
        </div>
      </script>

      <script type="text/html" id="randomTpl">
        <input type="checkbox" name="is_random" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="random" {{#  if(d.is_random == 1){ }}checked{{# }}}>
      </script>


      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
        <a class="layui-btn layui-btn-primary layui-border-green layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit" ></i>编辑</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-href="/website/recommendNovel.html?id={{d.id}}" lay-text="{{d.id}} - 授权书籍"><i class="layui-icon layui-icon-auz" ></i>授权书籍</a>
      </script>
    </div>


  </div>

</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table','admin'], function(){
    var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

    form.on('submit(LAY-user-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('LAY-recommend', {
        where: field
        ,page: {
          curr: 1  // 将页码重置为第一页
        }
      });
    });


    form.on('submit(export)', function(data){
      var field = data.field;
      var queryString = $.param(field);
      window.location.href = "{:url('website/recommendExport')}?"+queryString+'';
      return false;
    });


    table.render({
      elem: '#LAY-recommend'
      , url: '/website/recommendList' //模拟接口
      , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: false
      , cellMinWidth: 100
      , response: {
        statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
      }
      , page: true //开启分页
      , limit: 20
      , limits: [10, 20, 30, 50, 100]
      , cols: [
        [{type:'checkbox'}
          ,{field: 'id', width: 80, title: 'ID'}
          , {field: 'manager_user', title: '代理商',templet:function (d) {
            if(d.manager_user)
            {
              return d.manager_user.account;
            }else{
              return '分销平台';
            }
          },align: 'center'}
          , {field: 'location_key', title: 'location_key', minWidth: 150}
          , {field: 'title', title: '推荐标题', minWidth: 180}
		  , {field: 'en_title', title: '推荐英文标题', minWidth: 180}
          ,{field:'is_random', title:'<span lay-tips="打开后书籍将随机返回到读者页面，对分页查询无效">随机展示</span>', templet: '#randomTpl', unresize: true, align: 'center',width:200}
          , {field: 'xs_novel_count', title: '线上小说', align: 'center',width:100}
          , {field: 'pb_novel_count', title: '屏区小说', align: 'center',width:100}
          , {field: 'freq', title: '归属频道',templet:function (d) {
              if (d.freq == 1){
                return '<span style="color: #01AAED;">男频</span>';
              }else if(d.freq == 2){
                return '<span style="color: #F581B1;">女频</span>';
              }else if(d.freq == 0){
                return '无';
              }
          },align: 'center',width:180}
          , {field: 'desc', title: '描述'}
          , {
          title: '操作',
          minWidth: 250,
          align: 'center',
          fixed: 'right',
          toolbar: '#table-useradmin-admin',
        }]]
    });



    //监听开关
    form.on('switch(random)', function(data){
      if (data.elem.checked == true) {
        var value = 1;
      } else {
        var value = 0;
      }
      admin.req({
        url: '/website/switchRandom'
        , type: "POST"
        , data: {'id': data.value, 'is_random': value}
        , done: function (res) {
          layer.msg('设置成功', {icon: 1, time: 1000}, function () {
          });
        }, not_finish: function (res) {
          layer.msg(res.msg,function () {
            table.reload('LAY-recommend');
          });
        }
      });
    });


    //头工具栏事件
    table.on('toolbar(LAY-recommend)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'add':
          layer.open({
            type: 2
            ,maxmin: true//开启最大化最小化按钮
            ,title: '添加推荐位'
            ,content: '/website/setRecommend'
            ,offset: '5px'
            ,area: ['450px', '530px']
            ,btn: ['确定', '取消']
            ,yes: function(index, layero){
              var iframeWindow = window['layui-layer-iframe'+ index]
                      ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");

              //监听提交
              iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){
                var field = data.field; //获取提交的字段
                //提交 Ajax 成功后，静态更新表格中的数据
                //$.ajax({});
                admin.req({
                  url: '/website/setRecommend'
                  , type: "POST"
                  , data: field
                  , done: function (res) {
                    layer.msg('添加成功', {icon: 1, time: 2000}, function () {
                      table.reload('LAY-recommend');
                      layer.close(index); //关闭弹层
                    });
                  },not_finish:function (res) {
                    layer.msg(res.msg);
                  }
                });
              });
              submit.trigger('click');
            }
          });
          break;
        case 'plAdd':
          layer.open({
            type: 2
            ,maxmin: true//开启最大化最小化按钮
            ,title: '批量添加推荐位'
            ,content: '/website/plAddRecommend'
            ,offset: '5px'
            ,area: ['650px', '90%']
            ,btn: ['保存', '取消']
            ,yes: function(index, layero){
              var iframeWindow = window['layui-layer-iframe'+ index]
                      ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");

              //监听提交
              iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){
                var field = data.field; //获取提交的字段
                //提交 Ajax 成功后，静态更新表格中的数据
                //$.ajax({});
                var index = layer.confirm('确认批量保存这些推荐位？', {
                  btn: ['确认','取消'] //按钮
                  ,title:false
                }, function(){
                  admin.req({
                    url: '/website/plAddRecommend'
                    , type: "POST"
                    , data: field
                    , done: function (res) {
                      table.reload('LAY-recommend');
                      var jsonData = res.data;
                      var htmlContent = "<div>";
                      for (var key in jsonData) {
                        var innerArray = jsonData[key];
                        if (jsonData[key]['code'] === 1){
                          htmlContent += "<p>"+key+"：<span style='color: #5FB878;'>" + jsonData[key]['msg'] + "</span></p>";
                        }else {
                          htmlContent += "<p>"+key+"：<span style='color: #FF5722;'>" + jsonData[key]['msg'] + "</span></p>";
                        }
                      }
                      htmlContent += "</div>";
                      layer.close(index);
                      layer.open({
                        type: 1,
                        area: ['420px', '500px'], //宽高
                        content: htmlContent
                      });
                      table.reload('LAY-recommend');
                    },not_finish:function (res) {
                      layer.msg(res.msg);
                    }
                  });

                }, function(){
                });

              });
              submit.trigger('click');
            }
          });
          break;
        case 'plAddNovel':
          layer.open({
            type: 2
            ,maxmin: true//开启最大化最小化按钮
            ,title: '批量设置书籍'
            ,content: '/website/plAddRecommendNovels'
            ,offset: '5px'
            ,area: ['600px', '80%']
            ,btn: ['保存', '取消']
            ,yes: function(index, layero){
              var iframeWindow = window['layui-layer-iframe'+ index]
                      ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");

              //监听提交
              iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){

                submit.attr('disabled',true);

                var field = data.field; //获取提交的字段
                //提交 Ajax 成功后，静态更新表格中的数据
                //$.ajax({});
                  admin.req({
                    url: '/website/plAddRecommendNovels'
                    , type: "POST"
                    , data: field
                    , done: function (res) {
                      layer.msg('设置成功', {icon: 1, time: 1000}, function () {
                        layer.close(index);
                        table.reload('LAY-recommend');
                        submit.attr('disabled',false);
                      });
                    },not_finish:function (res) {
                      layer.msg(res.msg,function () {
                        submit.attr('disabled',false);
                      });
                    }
                  });

              });
              submit.trigger('click');
            }
          });
          break;
        case 'del':
          var data = checkStatus.data;
          if (data.length === 0) {
            layer.msg('请选择需要删除的推荐位');
            return false;
          }
          var ids = [];
          for (var key in data) {
            ids.push(data[key]['id']);
          }
          layer.confirm('确认删除这些推荐位吗，请谨慎操作！',{icon: 3, title:false}, function(index){
            admin.req({
              url: '/website/delRecommend'
              , type: "POST"
              , data: {'ids': ids}
              , done: function (res) {
                layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                  table.reload('LAY-recommend');
                  layer.close(index);
                });
              },not_finish:function (res) {
                layer.msg(res.msg);
              }
            });
          });
          break;
      }
    });


    //监听工具条
    table.on('tool(LAY-recommend)', function(obj){
      var data = obj.data;
      if (obj.event === 'del'){
        layer.confirm('【'+obj.data.title+'】确认删除此推荐位吗？',{icon: 3, title:false}, function(index){
          var ids = [];
          ids.push(obj.data.id);
          admin.req({
            url: '/website/delRecommend'
            , type: "POST"
            , data: {'ids': ids}
            , done: function (res) {
              layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                obj.del();
                layer.close(index);
              });
            },not_finish:function (res) {
              layer.msg(res.msg);
            }
          });
        });
      }else if (obj.event === 'edit'){
        layer.open({
          type: 2
          ,maxmin: true//开启最大化最小化按钮
          ,title: '编辑推荐位'
          , content: '/website/setRecommend?id=' + obj.data.id
          ,offset: '5px'
          ,area: ['450px', '530px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");

            //监听提交
            iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){
              var field = data.field; //获取提交的字段
              //提交 Ajax 成功后，静态更新表格中的数据
              //$.ajax({});
              admin.req({
                url: '/website/setRecommend'
                , type: "POST"
                , data: field
                , done: function (res) {
                  layer.msg('设置成功', {icon: 1, time: 2000}, function () {
                    table.reload('LAY-recommend');
                    layer.close(index); //关闭弹层
                  });
                },not_finish:function (res) {
                  layer.msg(res.msg);
                }
              });
            });
            submit.trigger('click');
          }
        });
      }
    });


  });
</script>
</body>
</html>

